<!--
 * @Descripttion: 
 * @version: 
 * @Author: yuanpingfang
 * @Date: 2022-06-18 17:18:17
 * @LastEditors: yuanpingfang
 * @LastEditTime: 2022-07-23 17:45:02
-->
<template>
  <div class="app-container">
    <el-col :span="18" :offset="3" :xs="24">
      <el-card>
        <div slot="header" class="clearfix">
          <span>请假表单</span>
        </div>
        <div>
          <el-form ref="form" :model="form" label-width="100px" disabled>
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请人" prop="partyId">
                  <span>{{ partyIdFormat(form) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请时间" prop="applyDate">
                  <span>{{ form.applyDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="请假类型" prop="vacationTypeId">
                  <span>{{ vacationTypeFormat(form) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间" prop="fromdate">
                  <el-date-picker
                    clearable
                    v-model="form.fromdate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="fromDateHour">
                  <el-select
                    v-model="form.fromDateHour"
                    placeholder="请选择从几时开始"
                  >
                    <el-option
                      v-for="dict in fromDateHourOptions"
                      :key="dict.enumCode"
                      :label="dict.description"
                      :value="dict.enumCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="thrudate">
                  <el-date-picker
                    clearable
                    v-model="form.thrudate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="thruDateHour">
                  <el-select
                    v-model="form.thruDateHour"
                    placeholder="请选择从几时结束"
                  >
                    <el-option
                      v-for="dict in thruDateHourOptions"
                      :key="dict.enumCode"
                      :label="dict.description"
                      :value="dict.enumCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="请假总工时" prop="totalWorkTime">
                  <el-input
                    v-model="form.totalWorkTime"
                    placeholder="请输入请假总工时"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="请假事由" prop="description">
                  <el-input
                    v-model="form.description"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="附件列表：" prop="affixFilePath">
                  <image-preview :src="form.affixFilePath ? form.affixFilePath : ''" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <approve></approve>
    </el-col>
  </div>
</template>

<script>
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";

import Approve from "@/components/Approve";

export default {
  name: "vavation_approve",
  components: { Approve },
  props: {},
  data() {
    return {
      // 表单参数
      form: {},
      // 申请人ID业务字典
      partyIdOptions: [],
      // 请假类型业务字典
      vacationTypeIdOptions: [],
      // 从几时开始业务字典
      fromDateHourOptions: [],
      // 从几时结束业务字典
      thruDateHourOptions: [],
    };
  },
  created() {
    var procInsId = this.$route.query && this.$route.query.procInsId;
    var taskId = this.$route.query && this.$route.query.taskId;
    // var businessKey = this.$route.query && this.$route.query.businessKey;
    // 获取表单参数
    this.getApproveFormParams(taskId, procInsId);
    // 申请人业务字典
    this.getEntityDicts("person:partyId:firstName").then((response) => {
      this.partyIdOptions = response.data;
    });
    // 请假类型业务字典
    this.getEnumDicts("VACATION_TYPE").then((response) => {
      this.vacationTypeIdOptions = response.data;
    });
    // 从几时开始业务字典
    this.getEnumDicts("VACATION_TIME").then((response) => {
      this.fromDateHourOptions = response.data;
    });
    // 从几时结束业务字典
    this.getEnumDicts("VACATION_TIME").then((response) => {
      this.thruDateHourOptions = response.data;
    });
  },
  mounted() {},
  computed: {
    userInfo() {
      return this.$store.state.user; //当前登录用户信息
    },
  },
  methods: {
    // 人员字典转换
    partyIdFormat(row, column) {
      let val = null;
      this.partyIdOptions.forEach((item, index) => {
        if (row.partyId === item.partyId) {
          val = item.firstName;
        }
      });
      return val;
    },

    vacationTypeFormat(row, column) {
      let val = null;
      this.vacationTypeIdOptions.forEach((item, index) => {
        if (row.vacationTypeId === item.enumCode) {
          val = item.description;
        }
      });
      return val;
    },
    getApproveFormParams(taskId, procInsId) {
      // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
      if (taskId) {
        getProcessVariables(taskId).then((res) => {
          this.form = res.data.businessMap;
        });
      } else {
        // 2.从业务流水表获取工作流表单参数
        getBusinessLog(procInsId).then((response) => {
          if (response.data) {
            this.form = JSON.parse(response.data.busiContentJson);
          }
        });
      }
    },
  },
};
</script>
